<template>
  <div class="wxMultimediaCard">
    <div class="mul-text">{{ mulText() }}</div>
    <div class="mul-name">
      <div v-for="(type,index) of mulTypes()" :key="index">【{{ type }}】</div>
    </div>
  </div>
</template>

<script>
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";

/**
 * mulimedia ={
 *    text:'测试文案',
 *    others:[{
 *      type:'pic',
 *      content:[]
 *      }]
 *  }
 * pic : 【图片】
 * video: 【视频】
 * link：  【图文】
 * mini：  【小程序】
 * file：  【文件】
 */
export default {
  name: "wxMultimediaCard",
  components: {WxTooltip},
  props: ['mulimedia'],
  data() {
    return {
      data: this.mulimedia || {},
      types: {pic: '图片', video: '视频', link: '图文', mini: '小程序', file: '文件'}
    }
  },
  methods: {
    mulText() {
      return this.data.text ? this.data.text : ''
    },
    mulTypes() {
      const others = this.data.others || []
      return others.map(other => this.types[other.type] || '未知')
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common";

.wxMultimediaCard {
  border-radius: 10px;
  width: 280px;
  height: 180px;
  border: 1px solid #dbdada;
  display: flex;
  flex-direction: column;

  .mul-text{
    display: -webkit-box;
    @include text-over(4);
    flex: 0.9;
    padding: 4px 10px;
  }

  .mul-name {
    border-top: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
